<template>
  <view class="safe-area-view" :class="[warpClass]" :style="customStyle">
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: "SafeAreaView",
  props: {
    warpClass: {
      type: String,
      default: "",
    },
    customStyle: {
      type: String,
      default: "",
    },
  },
};
</script>

<style scoped>
.safe-area-view {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  width: 100%;
}
</style>